<!-- 桌台列表 -->
<template>
  <BasicTable @register="registerTable" :rowSelection="rowSelection">
    <template #tableTitle>
      <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleAddTable"> 添加桌台</a-button>
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <template #overlay>
          <a-menu>
            <a-menu-item key="1" @click="batchHandleDelete">
              <Icon icon="i-ant-design:delete-outlined" />
              删除
            </a-menu-item>

            <a-menu-item key="1" @click="batchHandleDelete">
              <Icon icon="i-ant-design:download-outlined" />
              下载桌码
            </a-menu-item>
          </a-menu>
        </template>
        <a-button
          >批量操作
          <Icon icon="i-mdi:chevron-down" />
        </a-button>
      </a-dropdown>
    </template>
    <!--操作栏-->
    <template #action="{ record }">
      <TableAction :actions="getTableAction(record)" />
    </template>
  </BasicTable>
  <TableDrawer @register="registerDrawer" @success="handleSuccess" showFooter />
  <TableQrcodeModal @register="registerTableQrcode" showFooter />
</template>

<script lang="ts" name="shop-table" setup>
  import { ref, computed, unref, onMounted } from "vue"
  import { BasicTable, TableAction, ActionItem } from "/@/components/Table"
  import { Icon } from "/@/components/Icon"
  import TableDrawer from "./TableDrawer.vue"
  import TableQrcodeModal from "./TableQrcodeModal.vue"
  import { useListPage } from "/@/hooks/system/useListPage"
  import { useDrawer } from "/@/components/Drawer"
  import { useModal } from "/@/components/Modal"
  import { useMessage } from "/@/hooks/web/useMessage"
  import { columns, searchFormSchema } from "./table.data"
  import { listTable, deleteTable, batchDeleteTable } from "./table.api"
  import { listStore } from "/@/api/misc/store"
  import { useUserStore } from "/@/store/modules/user"
  const { createMessage, createConfirm } = useMessage()
  const [registerDrawer, { openDrawer }] = useDrawer()
  const [registerTableQrcode, { openModal: openTableQrcode }] = useModal()
  const tenantId = ref(null)
  const { tableContext } = useListPage({
    designScope: "table-list",
    tableProps: {
      title: "桌台列表",
      api: listTable,
      bordered: false,
      immediate: false,
      columns: columns,
      pagination: false,
      useSearchForm: true,
      tableSetting: { fullScreen: true },
      formConfig: {
        schemas: searchFormSchema,
        showResetButton: false,
      },
      actionColumn: {
        width: 120,
      },
      beforeFetch: (params) => {
        params.tenantId = unref(tenantId.value)
      },
    },
  })

  const [registerTable, { reload, getForm }, { rowSelection, selectedRowKeys }] = tableContext

  onMounted(() => {
    const { updateSchema } = getForm()
    const userStore = useUserStore()
    if (!userStore.getSelectTenant?.isMainTenant) {
      reload()
      return
    }
    updateSchema({
      field: "tenantId",
      componentProps: ({ formModel, formActionType }) => {
        return {
          optionFilterProp: "label",
          labelField: "name",
          valueField: "id",
          showSearch: true,
          api: listStore,
          onSelect: async (value: any, option: any) => {
            console.log("option", option)
            tenantId.value = value
            reload()
          },
          onOptionsChange: async (options) => {
            if (options.length > 0) {
              formModel.tenantId = options[0].value
              tenantId.value = options[0].value
              console.log("tenantId", tenantId.value)
              reload()
            }
          },
        }
      },
    })
  })

  function handleAddTable() {
    openDrawer(true, { tenantId: tenantId.value, isUpdate: false })
  }

  async function handleEdit(record: Recordable) {
    openDrawer(true, { record, isUpdate: true, tenantId: tenantId.value })
  }

  async function handleDelete(record) {
    await deleteTable({ id: record.id }, reload)
  }

  async function batchHandleDelete() {
    await batchDeleteTable({ ids: selectedRowKeys.value }, () => {
      selectedRowKeys.value = []
      reload()
    })
  }

  function handleSuccess({ values }) {
    reload()
    createMessage.success("编辑成功")
  }

  function handleDownQrcode(record) {
    openTableQrcode(true, { record })
  }

  function getTableAction(record): ActionItem[] {
    return [
      {
        label: "桌码",
        onClick: handleDownQrcode.bind(null, record),
      },
      {
        label: "编辑",
        onClick: handleEdit.bind(null, record),
      },
      {
        label: "删除",
        popConfirm: {
          title: `是否确认删除 ${record.code}`,
          confirm: handleDelete.bind(null, record),
        },
      },
    ]
  }
</script>

<style scoped></style>
